<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/article1.css">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="logo-box">
            <img src="../../src/logo.png" alt="logo">
        </div>
        <div class="search-logo">
            <a href="./search.html">
                <img src="../../src/search.png" alt="">
            </a>
        </div>
        <div class="line3">
            <img src="../../src/line3.png" alt="">
        </div>
    </header>
    
    <section>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="articleimg">
                        <img src="../../src/title1-1.png" alt="">
                        <div class="bgcblack">
                            <p><span>[专业IMC平台]</span>太子金涂鸦大赛网络整合营销传播</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="articleimg">
                        <img src="../../src/title1-1.png" alt="">
                        <div class="bgcblack">
                            <p><span>[专业IMC平台]</span>太子金涂鸦大赛网络整合营销传播</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="articleimg">
                        <img src="../../src/title1-1.png" alt="">
                        <div class="bgcblack">
                            <p><span>[专业IMC平台]</span>太子金涂鸦大赛网络整合营销传播</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"> </script>
        <script>        
            var mySwiper = new Swiper ('.swiper-container', {
            //   direction: 'vertical', // 垂直切换选项
              loop: true, // 循环模式选项
              
              // 如果需要分页器
              pagination: {
                el: '.swiper-pagination',
              },
              
              // 如果需要前进后退按钮
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },
              
              // 如果需要滚动条
              scrollbar: {
                el: '.swiper-scrollbar',
              },
            })        
            </script>

        <div class="articlebox">
            <div class="manybox">
                <a href="./article2.html"><img src="../../src/title1-2.png" alt=""></a>
                <p>海天“晒“宴，和汪涵一起， 参观海天酱油......</p>
                <div class="many">
                    <input type="button" value="营销">
                    <span><img src="../../src/Glove.png" alt="">120</span>
                    <span><img src="../../src/Geye.png" alt="">560</span>
                </div>
                <p><img src="../../src/title1-tou.png" alt=""><span>叶巧岚</span><span>2015年1月20日</span></p>
            </div>
            <div class="manybox">
                <a href="./article2.html"><img src="../../src/title1-2.png" alt=""></a>
                <p>海天“晒“宴，和汪涵一起， 参观海天酱油......</p>
                <div class="many">
                    <input type="button" value="营销">
                    <span><img src="../../src/Glove.png" alt="">120</span>
                    <span><img src="../../src/Geye.png" alt="">560</span>
                </div>
                <p><img src="../../src/title1-tou.png" alt=""><span>叶巧岚</span><span>2015年1月20日</span></p>
            </div>
            <div class="manybox">
                <a href="./article2.html"><img src="../../src/title1-2.png" alt=""></a>
                <p>海天“晒“宴，和汪涵一起， 参观海天酱油......</p>
                <div class="many">
                    <input type="button" value="营销">
                    <span><img src="../../src/Glove.png" alt="">120</span>
                    <span><img src="../../src/Geye.png" alt="">560</span>
                </div>
                <p><img src="../../src/title1-tou.png" alt=""><span>叶巧岚</span><span>2015年1月20日</span></p>
            </div>
            <div class="manybox">
                <a href="./article2.html"><img src="../../src/title1-2.png" alt=""></a>
                <p>海天“晒“宴，和汪涵一起， 参观海天酱油......</p>
                <div class="many">
                    <input type="button" value="营销">
                    <span><img src="../../src/Glove.png" alt="">120</span>
                    <span><img src="../../src/Geye.png" alt="">560</span>
                </div>
                <p><img src="../../src/title1-tou.png" alt=""><span>叶巧岚</span><span>2015年1月20日</span></p>
            </div>
            <div class="manybox">
                <a href="./article2.html"><img src="../../src/title1-2.png" alt=""></a>
                <p>海天“晒“宴，和汪涵一起， 参观海天酱油......</p>
                <div class="many">
                    <input type="button" value="营销">
                    <span><img src="../../src/Glove.png" alt="">120</span>
                    <span><img src="../../src/Geye.png" alt="">560</span>
                </div>
                <p><img src="../../src/title1-tou.png" alt=""><span>叶巧岚</span><span>2015年1月20日</span></p>
            </div>
            <div class="manybox">
                <a href="./article2.html"><img src="../../src/title1-2.png" alt=""></a>
                <p>海天“晒“宴，和汪涵一起， 参观海天酱油......</p>
                <div class="many">
                    <input type="button" value="营销">
                    <span><img src="../../src/Glove.png" alt="">120</span>
                    <span><img src="../../src/Geye.png" alt="">560</span>
                </div>
                <p><img src="../../src/title1-tou.png" alt=""><span>叶巧岚</span><span>2015年1月20日</span></p>
            </div>
            <hr>
            <p>加载更多</p>
        </div>
    </section>

    <footer>
        <ul>
            <li>
                <a href="../../index.html">
                    <div class="foot-icon">
                        <img src="../../src/footer1.png" alt="">
                    </div>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="./denglu.html">
                    <div class="foot-icon">
                        <img src="../../src/footer2.png" alt="">
                    </div>
                    <p>GIMC</p>
                </a>
            </li>
            <li>
                <a href="./article1.html">
                    <div class="foot-icon">
                        <img src="../../src/footer3.png" alt="">
                    </div>
                    <p>文章</p>
                </a>
            </li>
            <li>
                <a href="./ziyuan1.html">
                    <div class="foot-icon">
                        <img src="../../src/footer4.png" alt="">
                    </div>
                    <p>资源</p>
                </a>
            </li>
            <li>
                <a href="./kecheng1.html">
                    <div class="foot-icon">
                        <img src="../../src/footer5.png" alt="">
                    </div>
                    <p>学院</p>
                </a>
            </li>
        </ul>
    </footer>
</body>
</html>